<template>

  <!-- 右侧个人信息 -->
  <div class="information-container">
    <div v-if="restShow==0" class="container">
      <div style="margin: 10px;justify-content:center;display:flex;">
        <span>个人信息</span>
      </div>

      <!-- 信息栏 -->
      <div class="information-bar" :key="index" v-for="(item, index) in myData[0]">

        <!-- 头像 -->
        <div class="left-text" v-if="index=='头像'" >{{index}}</div>
        <div class="right-text" v-if="index=='头像'" >
          <div>
            <userAvatar :user="user"/>
          </div>
        </div>

        <div class="left-text" v-if="index!=='头像'">{{index}}</div>
        <div class="right-text" v-if="index!=='头像'">
          <div>{{item}}</div>
        </div>

      </div>

      <div class="information-bar" v-for="( item, index ) in teacherList" :key="index">
        <div class="left-text" v-if="(index==0)">我的身份</div>
        <div class="left-text" v-if="(index>0)">我的身份{{index + 1}}</div>
        <div class="right-text" @click="restShow=2" style="padding-left:60px;">{{item}}</div>
      </div>

      <div class="information-bar">
        <div class="left-text">修改密码</div>
        <div class="right-text" @click="restShow=2" style="padding-left:60px;">
          <i class="el-icon-arrow-right"></i>
        </div>

      </div>
    </div>

    <headsculpture v-if="restShow==1" class="restPwd-class">
      <button slot="back" class="back-top" @click="restShow=0">
        <i class="el-icon-arrow-left"></i>
        <div>返回</div>
      </button>
    </headsculpture>

    <rest v-if="restShow==2" class="restPwd-class">
      <div slot="back"  @click="restShow=0">
        <el-button type="danger" size="mini">关闭</el-button>
      </div>
    </rest>


  </div>

</template>

<script>
import { myInfo } from '@/api/myInfoTeacher/myInfo'
import headsculpture from './headsculpture'
import userAvatar from './userAvatar'
import rest from './restPwd'

export default {
  components: {
    headsculpture,
    userAvatar,
    rest,
    
  },
  mounted() {
    this.myInfoData()
  },

  data() {
    return {
      user: {},
      value:'',
      myData: [],
      restShow: 0,
      teacherList: [],
    }
  },

  methods: {

    getData(data) {
      console.log(data, 'data')
      for (const key in data) {
        this.myData.push({
          姓名: data[key][0],
          我的账号: data[key][1],
          头像: data[key][2],
        })
        for (const index in data[key]) {
          if (index > 2) {
            this.teacherList.push(data[key][index])
          }
        }
      }
      // this.value=this.teacherList[0]
      // console.log(this.myData, 'myData')
      // console.log(this.teacherList, 'teacherList')
    },

    // 获取用户信息
    async myInfoData() {
      const res = await myInfo() 
      console.log(res.data, 'myInfoData')
      if ( JSON.stringify(res.data) == "{}" ) {
        this.$message("数据为空")
      } else if ( res.data == undefined ) {
        this.$message.error("数据库错误请检查")
      } else {
        this.getData(res.data)
      }
    }
  }
}

</script>


<style scoped>
/* 右侧个人信息 */
.information-container {
  width: 100%;
  padding: 0px;
  display: flex;
  margin: 2.5rem 0px;
  flex-direction: column;
  border: 1px solid #f5f5f5;
}


/* 信息栏 */
.information-bar {
  display: flex;
  position: relative;
  flex-direction: row;
  width: 100%;
  height: 3.125rem;
  margin: .0625rem .125rem;
  border-radius: 5px;
  align-items: center;
  border: 1px solid rgba(245, 245, 245, 1);
}

/* 左侧信息 */
.left-text {
  margin: .625rem 1.875rem;  
  font-size: 1.25rem;
  color: #101010;
}

/* 右侧信息 */
.right-text {
  right: 0;
  display: flex;
  color: #999999;
  flex-direction: row;
  position: absolute;
  margin: .625rem 1.875rem;  
  align-items: center;
}

/* 修改密码 */
.restPwd-class {
  width:100%;
  height:100%;
  display:flex;
  position:relative;
  align-items:center;
  justify-content:center;
}

/* 返回功能 */
.back-top {
  top:0;
  left:0;
  margin:1.25rem;
  display:flex;
  position:absolute;
  flex-direction:row;
  align-items:center;
  border: 0;
  background: #fff;
}
</style>